<!-- 每月订单数量折线图 -->
<template>
  <div class="class_default" />
</template>

<script>
import echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize';
import { orderLineChartCount } from '@/api/tws/count';
import { getNowTime, getCountDays } from "@/utils/date";

export default {
  name: "OrderCount",
  mixins: [resize],
  props: {
    month: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null,
      series: [],
      date: '',
      days: 0,
      chartData: {
        title: '本月订单',  // 图表标题
        xName: [],  // X轴每一个点的名称
        xLabel: '', // X轴名称
        xData: [],  // X轴数据
        yLabel: '数量'  // Y轴名称
      }
    }
  },
  watch: {
    month: function(newData, oldData) {
      if(newData) {
        this.date = newData;
        // 本月天数
        this.days = getCountDays(this.date);
        // 查询数据
        this.getLineChart();
      }
    }
  },
  mounted() {
    if(!this.month) {
      this.date = getNowTime();
    } else {
      this.date = this.month;
    }
    // 本月天数
    this.days = getCountDays(this.date);
    // 查询数据
    this.getLineChart();
    // 创建图表
    this.chart = echarts.init(this.$el, 'macarons')
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // 折线图数据
    getLineChart() {
      orderLineChartCount(this.date).then(res => {
        this.chartData.xName = [];
        for(var i = 0; i < this.days; i++) {
          this.chartData.xName.push((i + 1) + '号');
        }
        this.chartData.xData = [{ name: '', data: new Array(this.days).fill(0) }];
        // 获取每日订单数
        res.data.forEach(el => {
          this.chartData.xData[0].data[Number(el.day) - 1] = el.num;
        })
      }).catch(err => {
        this.chartData.xName = [];
        for(var i = 0; i < this.days; i++) {
          this.chartData.xName.push((i + 1) + '号');
        }
        this.chartData.xData = [{ name: '', data: new Array(this.days).fill(0) }];
      }).finally(() => {
        // 先处理数据
        this.initData();
        this.$nextTick(() => {
          // 加载图表数据
          this.setChartData();
        })
      })
    },
    // 初始化图表的数据
    initData() {
      this.series = []
      this.chartData.xData.forEach(el => {
        let serie = {
          name: el.name,
          type: 'line',
          smooth: 0,
          symbolSize: 5,
          itemStyle: {
            normal: {
              // 拐点上显示数值
              label : {
                show: true
              }
            }
          },
          data: el.data,
          animationDuration: 2800
        }
        this.series.push(serie);
      });
    },
    // 加载图表数据
    setChartData() {
      this.chart.setOption({
        //【title组件】：图表标题
        title: {
          text: this.chartData.title,
          x: 'left',
          y: 'top',
          textStyle: {
            fontSize: 18,
            fontWeight: 'bolder',
            color: '#333'  // 主标题文字颜色
          },
        },
        //【legend组件】：图例
        legend: {
          itemGap: 15
        },
        //【tooltip组件】：提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        //【grid组件】：直角坐标系的底板
        grid: {
          top: '25%',
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        //【xAxis组件】：直角坐标系X轴
        xAxis: [{
          name: this.chartData.xLabel,
          data: this.chartData.xName,
          boundaryGap: false,
          axisTick: {
            show: false
          }
        }],
        //【yAxis组件】：直角坐标系Y轴
        yAxis: [{
          type: 'value',
          name: this.chartData.yLabel,
          axisTick: {
            show: false
          }
        }],
        // series(系列)
        //   name：
        //   type：图表类型：line(折线图)、bar(柱状图)、pie(饼图)、scatter(散点图)、graph(关系图)、tree(树图)、...
        //   symbol：设置小圆点消失，取值('none', 'circle')
        //   smooth：设置折线弧度，取值：0-1之间
        //   symbolSize：设置折线上圆点大小
        //   data：数据
        series: this.series
      })
    }
  }
}
</script>

<style scoped>
  .class_default {
    width: 100%;
    height: 300px;
  }
</style>
